<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-select v-model="reqParams.lineCode" placeholder="选择生产线">
						<el-option
							v-for="item in lineOptions"
							:key="item.id"
							:label="item.lineName"
							:value="item.lineCode" />
					</el-select>
					<RangeDate @change="rangeDateChange" />
					<el-button icon="el-icon-search" type="primary" :loading="isSearch" @click="search" />
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-card shadow="never" style="width: 100%; height: 100%;">
				<scEcharts height="500px" :option="echartsOption" />
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
import scEcharts from '@/components/scEcharts';
import RangeDate from "../../components/RangeDate";

export default {
    components: {
        scEcharts,
        RangeDate,
    },
    data() {
        return {
            isSearch: false,
            lineOptions: [],
            reqParams: {
                lineCode: '',
                startTime: '',
                endTime: '',
            },
            echartsOption: {
                title: {
                    left: "center",
                    text: '设备 OEE',
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        const tar = params[0];
                        if (tar.componentType === 'markLine')
                            return `${tar.name}: ${tar.value}`;

                        return `${tar.name}<br/>
                            负荷时长: ${this.timeFormater(tar.value.loadingTime)}<br/>
                            急停时长: ${this.timeFormater(tar.value.eStopingTime)}<br/>
                            加工时长: ${this.timeFormater(tar.value.workingTime)}<br/>
                            合格数量: ${tar.value.okCount}<br/>
                            不合格数量: ${tar.value.ngCount}<br/>
                            总数量: ${tar.value.totalCount}<br/>
                            良率: ${tar.value.yieldRate * 100}%<br/>`;
                    }
                },
                dataset: {
                    dimensions: ['equipCode', 'performanceRate'],
                    source: [],
                },
                xAxis: {
                    type: 'category',
                    axisLabel: { rotate: -30 },
                },
                yAxis: {},
                series: [
                    {
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' },
                            ],
                        },
                    },
                ]
            },
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        rangeDateChange(rangeDate) {
            if (rangeDate !== null) {
                this.reqParams.startTime = rangeDate[0];
                this.reqParams.endTime = rangeDate[1];
            }
        },
        async init() {
            const resp = await this.$API.mdline.list.get();
            this.lineOptions = resp.data;
            this.reqParams.lineCode = this.lineOptions?.[0]?.lineCode; // 默认选取第一条
        },
        async search() {
            this.isSearch = true;
            const resp = await this.$API.reportequipstat.oee.get(this.reqParams);
            this.isSearch = false;
            this.echartsOption.dataset.source = resp.data[0]?.oeeList ?? [];
            this.echartsOption.title.text = this.lineOptions.find(s => s.lineCode === this.reqParams.lineCode)?.lineName ?? '';
        },
        timeFormater(value) {
            return this.$TOOL.timeDuration(value, 'm');
        }
    },
}
</script>
